<template>
	<el-container>
	  <el-aside width="290px" v-loading="showDicloading">
		<el-container>
		  <el-header v-if="searchHide">
			<el-input 
			  placeholder="搜索请输入关键字" 
			  v-model="dicFilterText" 
			  clearable
			/>
		  </el-header>
		  <el-main class="nopadding">
			<el-tree
			  ref="dicRef"
			  :default-expand-all="true"
			  class="menu"
			  node-key="activity_id"
			  :data="dicList"
			  :props="dicProps"
			  :highlight-current="true"
			  :expand-on-click-node="false"
			  :filter-node-method="dicFilterNode"
			  @node-click="dicClick"
			>
			  <template #default="{ data }">
				<span class="custom-tree-node">
				  <span class="cat_name">{{ data.cat_name }}</span>
				  <span class="do" v-if="data.cat_name !== '所有'">
					<el-button-group>
					  <el-button 
						size="small" 
						type="primary" 
						icon="Plus"
						@click.stop="dicPlus(data)"
					  />
					  <el-button
						size="small"
						type="primary"
						icon="Edit"
						@click.stop="dicEdit(data)"
					  />
					  <el-button
						size="small"
						type="danger"
						icon="Delete"
						@click.stop="dicDel(data)"
					  />
					</el-button-group>
				  </span>
				</span>
			  </template>
			</el-tree>
		  </el-main>
		</el-container>
	  </el-aside>
	</el-container>
  </template>
  
  <script setup>
  /**
	 * @name scTree
	 * @desc 系统page左侧树状组件
	 * @prop {Funciton} apiObj - 请求树状参数接口
	 * @prop {Boolean} [searchHide=true] - 是否隐藏搜索框（默认不隐藏）
	 * @emits update:count - 当计数器变化时触发的事件
	 * @example
	 * <ComponentName title="Demo" :count="5" @update:count="handleUpdate" />
	 */
  import { ref, watch, onMounted } from 'vue'
  
  const props = defineProps({
	apiObj: {
	  type: Object,
	  default: () => ({})
	},
	searchHide: {
	  type: Boolean,
	  default: true
	}
  })
  
  const emit = defineEmits(['node-click', 'dicPlus', ])
  
  // data
  const showDicloading = ref(true)
  const dicList = ref([])
  const dicFilterText = ref('')
  const dicProps = ref({
	label: 'cat_name'
  })
  const dicRef = ref(null)
  
  // 方法
  const getDic = async () => {
	try {
	  const res = await props.apiObj.get()
	  const allNode = {
		id: '',
		cat_name: '所有',
		dept_path: ''
	  }
	  res.data.unshift(allNode)
	  dicList.value = res.data
	} finally {
	  showDicloading.value = false
	}
  }
  
  const dicFilterNode = (value, data) => {
	if (!value) return true
	const targetText = data.key + data.cat_name
	return targetText.includes(value)
  }
  
  const dicPlus = (data) => {
	emit('dicPlus', data)
  }
  
  const dicEdit = (data) => {
	// 编辑逻辑实现
  }
  
  const dicClick = (data) => {
	emit('node-click', data)
  }
  
  const dicDel = (data) => {
	ElMessageBox.confirm(
	  `确定删除 ${data.cat_name} 项吗？`,
	  '提示',
	  {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	  }
	).then(() => {
	  // 删除逻辑实现
	}).catch(() => {})
  }
  
  // 生命周期
  onMounted(() => {
	getDic()
  })
  
  // 观察器
  watch(dicFilterText, (val) => {
	dicRef.value.filter(val)
  })
  </script>
  
  <style scoped>
  .menu:deep(.el-tree-node__label) {
	display: flex;
	flex: 1;
	height: 100%;
  }
  
  .custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 10px;
	height: 100%;
  }
  
  .custom-tree-node .do {
	display: none;
  }
  
  .custom-tree-node:hover .do {
	display: inline-block;
  }
  </style>